import React, { Component } from 'react';
import {
	View, Text, StyleSheet, Dimensions, Platform, Modal
} from 'react-native';
import ImageViewer from 'react-native-image-zoom-viewer';
import { GLOBAL } from '../../../../../config/global';
const scale = GLOBAL.SCALE;

export default function ModalPicsComponent(props) {
	const { visible, urls, picPress, attachmentModalStyle } = props;
	return (
		<Modal animationType={"fade"}
			transparent={true}
			visible={visible}
			onRequestClose={() => { }}>
			<View style={[styles.attachmentModal, attachmentModalStyle]}>
				<ImageViewer imageUrls={urls} onClick={() => {
					picPress();
				}} />
			</View>
		</Modal>
	);


}

const styles = StyleSheet.create({
	attachmentModalTop: {
		width: '100%',
		flexDirection: 'row',
		alignItems: 'flex-end',
		justifyContent: 'flex-end',
	},
	attachmentModalText: {
		textAlign: 'right',
		color: '#000',
		width: 60 * scale,
		paddingRight: 12,
		paddingBottom: 10,
	},
	attachmentModal: {
		width: 375 * scale,
		height: '100%',
		backgroundColor: '#fff',
		justifyContent: 'space-between',
		paddingTop: Platform.OS === 'ios' ? 32 : 0,
	}
})